<template>
  <div class="os-header">
    <i class="iconfont icon-vue2"
       v-g-font="{top:8}"></i>
    <div class="os-header-title"
         v-g-font>{{obj.title}}</div>
    <ul>
      <li v-for="(rl, i) in routesList"
          :key="`rl-${i}`">
        <a @click="handelClick(rl.path)"
           :class="activeRoute === rl.path ? 'active' : ''">
          {{rl.label}}
        </a>
      </li>
    </ul>
    <el-menu :default-active="activeIndex"
             class="os-header-menu"
             mode="horizontal"
             @select="handleSelect">
      <template v-for="m in menuList">
        <os-menu-item :item="m"></os-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<script lang="ts">
  import {
    computed,
    defineComponent,
    reactive,
    ref,
    getCurrentInstance,
  } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { ElMenu } from 'element-plus'
  import osMenuItem from '@/components/os-menu-item/index'

  export default defineComponent({
    name: 'os-header',
    components: { ElMenu, osMenuItem },
    setup(props) {
      // 组合式API
      const count = ref<number>(0)
      const obj = reactive<Object>({
        title: 'vue3 demo',
      })
      const routesList: Array<Object> = reactive([
        {
          label: '首页',
          path: '/',
        },
        {
          label: '登录',
          path: '/login',
        },
      ])
      const menuList = reactive<Object>([
        {
          label: '选项1',
          id: '1',
        },
        {
          label: '选项2',
          id: '2',
          children: [
            {
              label: '子选项1',
              id: '2-1',
            },
            {
              label: '子选项2',
              id: '2-2',
            },
            {
              label: '子选项3',
              id: '2-3',
              children: [
                {
                  label: '二级选项',
                  id: '2-3-1',
                },
              ],
            },
          ],
        },
      ])
      const router = useRouter()
      const route = useRoute()
      const handelClick = (path: string) => {
        // console.log(router, path);
        router.push(path)
      }
      // 注意：使用getCurrentInstance()时候要注意尽量别使用里边的 ctx 属性 打包后容易出错，尤大大推荐使用内部的 proxy
      const { proxy }: any = getCurrentInstance()
      // proxy.$http()
      const activeRoute = computed(() => {
        const { path } = proxy.$router.currentRoute.value
        return path
      })
      const activeIndex = ref<string>('')
      const handleSelect = () => {}
      // 暴露给模板
      return {
        count,
        obj,
        routesList,
        handelClick,
        activeRoute,
        activeIndex,
        handleSelect,
        menuList,
      }
    },
  })
</script>
<style lang="scss" scoped>
  $color: #41b883;
  .os-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(15, 40, 81, 0.5);
    box-shadow: 0px 1px 5px 0px #0f2851, 0px 1px 36px 0px #0f2851 inset;
    display: flex;
    justify-content: center;
    align-items: center;
    &-title {
      font-size: 20px;
      font-weight: bold;
      margin-left: 8px;
      animation: flash 3s linear infinite;
    }
  }
  i {
    color: $color;
    font-size: 30px;
    animation: rotate360 2.5s linear infinite;
  }
  ul {
    position: absolute;
    left: 30px;
    font-size: 13px;
    li {
      display: inline-block;
      color: #fefefe;
      margin: 10px;
      a {
        cursor: pointer;
        &:hover {
          color: $color;
        }
        &::after {
          content: '|';
          color: cadetblue;
          margin-left: 8px;
        }
      }
    }
  }
  .active {
    color: $color;
    font-weight: bold;
  }
  .os-header-menu {
    height: 100%;
    right: 0;
    left: revert;
    border: 0px;
    background: #0000;
    li {
      color: #fefefe;
      &:hover,
      &:active {
        background: #0000;
      }
    }
    .el-submenu {
      margin: 0;
    }
    .is-active,
    :deep(.el-submenu__title) {
      color: $color !important;
      border-color: $color !important;
    }
  }
</style>
